<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>美多商城-找回密码</title>
    <link rel="stylesheet" type="text/css" href="/static/css/reset.css">
    <link rel="stylesheet" type="text/css" href="/static/css/main.css">
    <script type="text/javascript" src="/static/js/host.js"></script>
    <script type="text/javascript" src="/static/js/vue-2.5.16.js"></script>
    <script type="text/javascript" src="/static/js/axios-0.18.0.min.js"></script>
</head>
<body>
<div class="find_header">
    <img src="/static/images/logo.png">
    <span class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;找回密码</span>
</div>

<div class="find_form" id="app" v-cloak>
    <div class="step" v-bind:class="step_class"></div>
    <!-- 第一步的表单 -->
    <form class="form_step" v-show="is_show_form_1" v-on:submit.prevent="form_1_on_submit">
        <div class="form_group">

            <label>账号名：</label>
            <input v-model="username" v-on:blur="check_username" type="text" name="username" class="input_txt">
            <span v-show="error_username" class="error">{{ error_username_message }}</span>
        </div>
        <div class="form_group">
            <label>验证码：</label>
            <input v-model="image_code" v-on:blur="check_image_code" type="text" name="img_code"
                   class="input_txt input_txt2">
            <img v-bind:src="image_code_url" v-on:click="generate_image_code" alt="图形验证码" class="pic_code">
            <span v-show="error_image_code" class="error">{{ error_image_code_message }}</span>
        </div>
        <div class="form_group">
            <input type="submit" value="下一步" class="input_sub">
        </div>
    </form>

    <!-- 第二步的表单 -->
    <form class="form_step" v-show="is_show_form_2" v-on:submit.prevent="form_2_on_submit">
        <div class="form_group">
            <label>手机号：</label>
            <input v-model="mobile" type="text" name="mobile" class="input_txt" disabled>
        </div>
        <div class="form_group">
            <label>短信验证码：</label>
            <input v-model="sms_code" v-on:blur="check_sms_code" type="text" name="code" class="input_txt input_txt2">
            <a v-on:click="send_sms_code" class="phone_code">{{ sms_code_tip }}</a>
            <span v-show="error_sms_code" class="error">{{ error_sms_code_message }}</span>
        </div>
        <div class="form_group">
            <input type="submit" value="下一步" class="input_sub">
        </div>
    </form>

    <!-- 第三步的表单 -->
    <form class="form_step" v-show="is_show_form_3" v-on:submit.prevent="form_3_on_submit">
        <div class="form_group">
            <label>新密码：</label>
            <input v-model="password" v-on:blur="check_pwd" type="password" name="pwd" class="input_txt">
            <span v-show="error_password" class="error">密码最少8位，最长20位</span>
        </div>
        <div class="form_group">
            <label>再次输入：</label>
            <input v-model="password2" v-on:blur="check_cpwd" type="password" name="cpwd" class="input_txt">
            <span v-show="error_check_password" class="error">两次输入的密码不一致</span>
        </div>
        <div class="form_group">
            <input type="submit" value="下一步" class="input_sub">
        </div>
    </form>

    <!-- 第四部提示 -->
    <div class="pass_change_finish" v-show="is_show_form_4">密码设置成功！</div>

</div>

<div class="footer no-mp">
    <div class="foot_link">
        <a href="#">关于我们</a>
        <span>|</span>
        <a href="#">联系我们</a>
        <span>|</span>
        <a href="#">招聘人才</a>
        <span>|</span>
        <a href="#">友情链接</a>
    </div>
    <p>CopyRight © 2016 北京美多商业股份有限公司 All Rights Reserved</p>
    <p>电话：010-****888 京ICP备*******8号</p>
</div>
<script type="text/javascript" src="/static/js/common.js"></script>
<script type="text/javascript" src="/static/js/find_password.js"></script>
</body>
</html>